<template>
  <div class="ipt">
    <div class="add">
      编号:<input type="text" v-model="code" /> 品牌名称:<input
        type="text"
        v-model="productName"
      />
      <br />
      产品图片地址:<input type="text" v-model="imgSrc" />

      价格:<input type="text" v-model="price" />
      <input type="button" value="添加" @click="add" />
    </div>

    <div class="add">
      品牌名称:<input
        type="text"
        placeholder="请输入搜索条件"
        v-model="keyinp"
      />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    oldGoodsList: {
      type: Array,
    },
  },
  data() {
    return {
      code: "",
      productName: "",
      imgSrc: "",
      price: "",
      keyinp: "",
    };
  },
  watch: {
    keyinp(newVal) {
      let result = this.oldGoodsList.filter(
        (item) => item.productName.indexOf(newVal) !== -1
      );
      this.$emit("search", result);
    },
  },

  methods: {
    add() {
      if (!this.code || !this.productName || !this.price || !this.imgSrc) {
        return;
      }
      let obj = {
        id: Math.random().toString(32).substring(2),
        code: this.code,
        imgSrc: this.imgSrc,
        productName: this.productName,
        price: this.price,
        count: 1,
      };
      this.$emit("add", obj);
    },
  },
};
</script>

<style scoped>
.add {
  padding: 5px;
  border: 1px solid black;
  margin-bottom: 10px;
}
</style>